<script lang="ts" setup>
import { computed } from 'vue'
import TnDemoPageContainer from '../page-container/src/page-container.vue'
import { useBasic } from './composables'
import { useAppI18n } from '@/hooks/use-i18n'

import type { PageContainerData } from '../page-container'

useBasic()

const { t } = useAppI18n()

const topSwiperData = [
  'https://resource.tuniaokj.com/images/vue3/banner/vue3-1-min.jpg',
]

const pageData = computed<PageContainerData>(() => ({
  [t('home.basic')]: {
    data: [
      {
        title: t('basic.color'),
        icon: 'gloves',
        path: 'color',
        url: '/demo-pages/basic/color/index',
      },
      {
        title: t('basic.icon'),
        icon: 'font',
        path: 'icon',
        url: '/demo-pages/basic/icon/index',
      },
      {
        title: t('basic.footer'),
        icon: 'rocket',
        path: 'footer',
        url: '/demo-pages/basic/footer/index',
      },
    ],
  },
}))
</script>

// #ifdef MP-WEIXIN
<script lang="ts">
export default {
  options: {
    // 在微信小程序中将组件节点渲染为虚拟节点，更加接近Vue组件的表现(不会出现shadow节点下再去创建元素)
    virtualHost: true,
  },
}
</script>
// #endif

<template>
  <TnDemoPageContainer
    :top-swiper-data="topSwiperData"
    :data="pageData"
    :show-title="false"
  />
</template>

<style lang="scss" scoped>
.basic-page {
  position: relative;
  width: 100%;
  height: 200vh;
}

</style>
